<link href="css/style_home.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ddphpalbum.js"></script>
<script type="text/javascript" src="includes/getalbum.php?id=collectionalbum&page=9"></script>

<style type="text/css">
	span.fadehover {
		position: absolute;
	}
	.fadehover:hover img{
		border: 1px solid navy;
	}
	img.a {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
	}

	img.b {
		position: absolute;
		left: 0;
		top: 0;
	}
	ul.thumb {
		float: left;
		list-style: none;
		width: 180px;
		margin-bottom: 3px;
		padding: 2px 2px 2px 2px;
		display:block;
	}
	ul.thumb li {
		float: left;
		padding: 3px;
		position: relative;  /* Set the absolute positioning base coordinate */
		width: 52px;
		height: 52px;
	}
	ul.thumb li span img {
		width: 52px; height: 52px; /* Set the small thumbnail size */
		-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
		/*border: 1px solid #ddd;*/
		/*background: #f0f0f0;*/
		position: absolute;
		padding : 2px 2px 2px 2px;
		left: 0; top: 0;
	}
	ul.thumb li img.hover {
		background:center;  /* Image used as background on hover effect
		border: none; /* Get rid of border on hover */
	}
</style>

<script type= "text/javascript">
	Ext.onReady(function(){
		images.getData(10);
		images.content(1);
		images.logo(1);

	});
</script>
	<div id="content_and_footer">
		<div id="page_content">
			<div id="content">
				<div id="aboutus">
				</div>
				<div id="onpress_banner">
				</div>
				<div id="onpress">
				</div>				
			</div>
			<div id="sidebar">
				<div id="gallery">
					<p class="titlebar">&nbsp;&nbsp;&nbsp;&nbsp;GALLERY</p>
					<div id="content_gallery">
						<script type="text/javascript">
		                var album = new phpimagealbum({
		                    albumvar: collectionalbum, //ID of photo album to display (based on getpics.php?id=xxx)
		                    dimensions: [3,2],
							kind: 'gallery',
		                    autodesc: "Photo %i", //Auto add a description beneath each picture? (use keyword %i for image position, %d for image date)
		                    showsourceorder: false, //Show source order of each picture? (helpful during set up stage)
		                    status: 'onpress',
		                    onphotoclick:function(thumbref, thumbindex, thumbfilename){
								var newImg = new Image();
							    newImg.src = collectionalbum.images[thumbindex][1];
							    var curHeight = collectionalbum.images[thumbindex][5];
							    var curWidth = collectionalbum.images[thumbindex][4];
							    var img = resize(curWidth,curHeight,fw,fh);
		                        thumbnailviewer.loadimage(newImg.src,img[0],img[1],thumbindex, collectionalbum);
		                    }
		                });
		                </script>
					</div>
					<div id="link_gallery">
					</div>
				</div>
			</div>
		</div>
		<div id="footer">
			Copyright © 2011 WHEEL HOUSE CAFE
		</div>		
	</div>
